<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/Stats.js" ></script>
		<script type="text/javascript" src="js/dat.gui.js" ></script>
		<script type="text/javascript" src="js/OBJLoader.js" ></script>
		<script type="text/javascript" src="js/TrackballControls.js" ></script>
		<script type="text/javascript" src="js/DragControls.js" ></script>
		<script type="text/javascript" src="layer/layer.js" ></script>
		<script type="text/javascript" src="js/view.js" ></script>
		<script type="text/javascript" src="js/ping.js" ></script>
		<link rel="stylesheet" href="css/common.css" />

		<title>机房3D模型图</title>
	</head>
	<style>
		body{
			margin: 0;
			overflow: hidden;
		}
		.menuImg:hover {
			cursor: pointer;
		}
		#divPiao1{
	background-color:black; width:200px; height:90px;
	 position: fixed; right:20px; top:20px;
	 /*filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;*/
	 color: white;font-size: 10px;border:1px solid #df2532 ;border-radius: 10px;
}


 #main {  
            height: 1800px;  
            padding-top: 90px;  
            text-align: center;  
        }  
        #fullbg {  
            background-color: gray;  
            left: 0;  
            opacity: 0.5;  
            position: absolute;  
            top: 0;  
            z-index: 3;  
            filter: alpha(opacity=50);  
            -moz-opacity: 0.5;  
            -khtml-opacity:0.5;  
        }  
  
        #dialog {  
            background-color: black;  
            border: 1px solid rgba(0,0,0, 0.4);  
            height: 400px;  
            margin: -200px 0 0 -100px;  
            padding: 1px;  
            position: fixed !important; /* 浮动对话框 */  
            position: absolute;  
            top: 50%;  
            left: 25%;
            width: 60%;  
            z-index: 5;  
            border-radius: 5px;  
            display: none;  
        }  
        #dialog p {  
                margin: 0 0 12px;  
                height: 24px;  
                line-height: 24px;  
                background: #CCCCCC;  
         }  
         #dialog p.close {  
                text-align: right;  
                padding-right: 10px;  
         }  
        #dialog p.close a {  
                color: #fff;  
                text-decoration: none;  
        }  



	</style>
	<body>
<div id="divPiao1">
		<p style="margin-left: 20px;">机柜名称: <span id="deviceNum" >暂无</span></p>
		<p style="margin-left: 20px;">故障分类: <span id="deviceErrorInfo" >暂无</span></p>
		<p style="margin-left: 20px; text-align: center;"><a id="infoDetail" style="color: red;">查看详情</a></p>
    </div>
	<div id="titile" style="height: 15%;">
     <p style="color: white; font-size:1em; line-height:100%;">鑫格建模系统</p>
    <p style="color: white; font-size:0.5em; line-height:100%;">
     	<a class="upUrl" style="color: bisque; text-decoration: none;" href="motorEdit.html">[  进入机柜管理  ]</a>
     </p>
	</div>
	<!--
	<div class="menu">
		<p><img class="menuImg" id="menuImg1"  style="width:50%;" src="img/edit.jpg"/></p>
		<!--<p><img class="menuImg" id="menuImg2"  style="width:50%;" src="img/edit.jpg"/></p>
		<p><img class="menuImg" id="menuImg3" style="width:50%;" src="img/edit.jpg"/></p>
		<p><img class="menuImg" id="menuImg4" style="width:50%;" src="img/edit.jpg"/></p>
		<p><img class="menuImg" id="menuImg5" style="width:50%;" src="img/edit.jpg"/></p>
	</div>-->
	
		<div id="Stats-output">
		</div>
		<div id="WebGL-output">
		</div>
		
		 <div id="main">  
            
            <div id="fullbg"></div>  
            <div id="dialog">  
                <p class="close">  
                    <a href="#" onclick="closeBg();">关闭</a></p>  
                    <div id="detail" style="color: #44ca54;">故障分析:因为室内温度原因，造成设备的潮湿无法正常使用</div>  
            </div>  
        </div>  
		
		<script>
			
			window.onload = init();
			var camera, scene, renderer,trackballControls,mesh;
			var gui;
			var INTERSECTED;//射线拾取
			var raycaster;//射线拾取
			var mouse;//射线拾取
			var intersects = [];//射线拾取
			
			function init(){
			layer.msg('数据加载中', {
			  icon: 16
			  ,shade: 0.8
			});
				//直接开启帧数检测
				var stats = initStats();
				
				//编辑代码处
				scene = new THREE.Scene();//场景构建
				camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相机构建
				
				//创建控件并绑定在相机上
				trackballControls = new THREE.TrackballControls(camera);
				trackballControls.rotateSpeed = 1.0;
				trackballControls.zoomSpeed = 1.0;
				trackballControls.panSpeed = 1.0;
				trackballControls.noZoom=false;
				trackballControls.noPan=false;
				trackballControls.staticMoving = true;
				trackballControls.dynamicDampingFactor = 0.3;
				renderer = new THREE.WebGLRenderer({antialias:true});//渲染器构建
				renderer.setClearColor(	0x0A0A0A);
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.shadowMapEnabled = true;//激活阴影
				renderer.shadowMapType = THREE.PCFSoftShadowMap;
				renderer.antialias = true;
/*				
				var arr = [0xBBFFFF,0xBBFFFF,0x8DB6CD, 0x8DB6CD,0x030303,0x030303]; 
				$("#menuImg2").click(function(){
					var index = Math.floor((Math.random()*arr.length)); 
					renderer.setClearColor(arr[index]);
				});
				
				*/
				//构建一个坐标轴
				var axes = new THREE.AxisHelper(20);
				//scene.add(axes);
				var planeGeometry = new THREE.PlaneGeometry(55, 30, 1, 1);
				//var planeMaterial = new THREE.MeshPhongMaterial({color:0xC1CDCD});
				var planeMaterial = new THREE.MeshLambertMaterial({color:0xC1CDCD});//转换对光源有渲染的材质
				var plane = new THREE.Mesh(planeGeometry,planeMaterial);
				plane.rotation.x = -0.5*Math.PI;
				plane.position.x = 2.5;
				plane.position.y = 0;
				plane.position.z = 0;
				scene.add(plane);
				plane.receiveShadow  = true;
				//渲染视图视角
				camera.position.x = 5;
				camera.position.y = 30;
				camera.position.z = 40;
				
				camera.lookAt(scene.position);
			
			var skyBoxGeometry = new THREE.BoxGeometry(10,2,2);  
  
			var texture = new THREE.TextureLoader().load("img/huise.jpg");  
			  
			var skyBoxMaterial = new THREE.MeshBasicMaterial( { map:texture, side: THREE.DoubleSide } );  
			  
			var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );  
			skyBox.castShadow = true;
			skyBox.position.x = 17;
			skyBox.position.y = 1;
			skyBox.position.z = 13;
			scene.add(skyBox);  
			border = new THREE.BoxHelper( skyBox,0x0dc3b4 );//设置边框，这个边框不会旋转
  			scene.add( border );
			
			
				 //添加材质灯光阴影
				 var spotLight = new THREE.SpotLight(0xABABAB);
				 spotLight.shadowDarkness = 0.1;
				 spotLight.position.set(20,40,30);
				 spotLight.castShadow = true;
				// spotLight.exponent = 1;
				 spotLight.target = plane;
				 
				 scene.add(spotLight);
				//定义射线
				raycaster = new THREE.Raycaster();
			    mouse = new THREE.Vector2();
				document.body.appendChild(renderer.domElement);
				document.addEventListener('mousemove', onDocumentMouseMove, false);
				 
				function onDocumentMouseMove(event) {
					event.preventDefault();
					mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
					mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
				}

			


				 $("#WebGL-output").append(renderer.domElement);
				 addRoom();
				 //【遍历机柜放入场景】
				 $.ajax({
				 	type:"GET", 
				 	url:"json/data.json",
				 	success:function(data){
				 		var List = data.List;
				 		$.each(List, function(index,val) {
				 			var loader = new THREE.OBJLoader();
				 				
							        /*loader.load('obj/pinecone.obj', function (loadedMesh) {
							            var material = new THREE.MeshLambertMaterial({color: 0xFF4040});
							            loadedMesh.children.forEach(function (child) {
							                child.material = material;
							                child.geometry.computeFaceNormals();
							                child.geometry.computeVertexNormals();
							            });
								            mesh = loadedMesh;
								            loadedMesh.scale.set(1.5, 1.5,1.5);
								            loadedMesh.rotation.x =0;
								            loadedMesh.rotation.y =List[index].y;
								            loadedMesh.rotation.z =3;
							                loadedMesh.position.x = List[index].x;
							                loadedMesh.position.y = 4;
							                loadedMesh.position.z = List[index].z;
							                loadedMesh.opacity = 0.5;
								            scene.add(loadedMesh);
							        });*/
							       	//创建一个方块
						            var cubeGeometry = new THREE.CubeGeometry(0.2,0.2,0.2);
						            // 创建一个方块的几何形状
						           // var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff,wireframe: true});
						           var cubeMaterial;
						           if(List[index].status==0){
				 						cubeMaterial = new THREE.MeshLambertMaterial({color:   0xFF3030});
				 					}else{
				 						cubeMaterial = new THREE.MeshLambertMaterial({color:   0x7CCD7C});
				 					}
						            
						            // 创建好一个方块的材质
						            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
						            // 把它的形体和它的灵魂相结合，这时他就是一个完整的人
						            cube.position.x = List[index].x;
						            cube.position.y = 4;
						            cube.position.z = List[index].z;
						            cube.rotation.z =10;
						             cube.rotation.x =10;
						            cube.castShadow = true;
						            cube.name="aaaa";
						            // 同样的，得指定它在坐标系中的位置。
						            scene.add(cube); 
				 				
				      		  	loader.load(List[index].model.model_type, function (loadedMesh) {
				      			var material = new THREE.MeshLambertMaterial();
				           		loadedMesh.children.forEach(function (child) {
				            	child.castShadow = true;
				            	child.name="child";
				                child.material = material;
				                child.geometry.computeFaceNormals();
				                child.geometry.computeVertexNormals();
				            });
					            mesh = loadedMesh;
					            loadedMesh.scale.set(0.015, 0.015, 0.015);
					            loadedMesh.rotation.x =0;
					            loadedMesh.rotation.y =List[index].y;
					            loadedMesh.rotation.z =0;
				                loadedMesh.position.x = List[index].x;
				                loadedMesh.position.y = 0;
				                loadedMesh.position.z = List[index].z;
				                loadedMesh.name=List[index].number;
				                scene.add(loadedMesh);
		           		});	
				 		});
				 		//layer.closeAll();
				 	}
				 	
				 })
				 
				 
				 
				 
				 
				 /*
					var loader = new THREE.OBJLoader();
				      		  	loader.load('obj/jigui.obj', function (loadedMesh) {
				      		  
				      			var material = new THREE.MeshLambertMaterial();
				           		 loadedMesh.children.forEach(function (child) {
				            	child.castShadow = true;
				            		child.name="aaa";
				                child.material = material;
				                child.geometry.computeFaceNormals();
				                child.geometry.computeVertexNormals();
				            });
					            mesh = loadedMesh;
					            loadedMesh.scale.set(0.02, 0.02, 0.02);
					            loadedMesh.rotation.x =0;
					            loadedMesh.rotation.y =0.01;
					            loadedMesh.rotation.z =0;
				                loadedMesh.position.x = -20;
				                loadedMesh.position.y = 0.01;
				                loadedMesh.position.z = 12;
				                // add the cube to the scene
				                var NowTimestamp = "obj_"+Date.parse(new Date());
				                
				                loadedMesh.name=NowTimestamp;
				                scene.add(loadedMesh);
				                 
		           			});*/
					
					
					
			        renderScene();

			        var clock = new THREE.Clock();
		       		var delta = clock.getDelta();
					function renderScene(){
						 stats.update();
			        	 requestAnimationFrame(renderScene);
						trackballControls.update(delta);
						 renderer.render(scene,camera);
						 raycaster.setFromCamera(mouse, camera);
					intersects = raycaster.intersectObjects(scene.children);
					
					if (intersects.length > 0) {
						if (INTERSECTED != intersects[0].object) {
							
							//if (INTERSECTED)INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
							INTERSECTED = intersects[0].object;
							//INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
							if(INTERSECTED.name != ""){
							//INTERSECTED.material.color.set( 0x71C671 );
							//捕获页
								$("#deviceNum").html("NBV00001");
								$("#deviceErrorInfo").html("线路故障老化");
							}
						}
					}else {
						//if (INTERSECTED) INTERSECTED.material.color.set(INTERSECTED.currentHex);
						INTERSECTED = null;
						layer.closeAll();
					}
					}	 
					//初始化帧数状态
					function initStats(){
						var stats = new Stats();
						stats.setMode(0);
						stats.domElement.style.position = "absolute";
						stats.domElement.style.left = "0px";
						stats.domElement.style.top  = "0px";
						//$("#Stats-output").append(stats.domElement);
						return stats;
					}
			}
			$("#menuImg1").click(function(){
				window.location.href = "motorEdit.html"
			});
			
			$("#infoDetail").click(function(){
				 var bh = $("body").height();  
	            var bw = $("body").width();  
	            $("#fullbg").css({  
	                height: bh,  
	                width: bw,  
	                display: "block"  
	            });  
	            $("#dialog").show(); 
			});

	        //关闭灰色 jQuery 遮罩   
	        function closeBg() {  
	            $("#fullbg,#dialog").hide();  
	        }  
			
		</script>
	</body>
</html>
